<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Stories</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/assets/imgs/theme/favicon.png}">
    <!-- NewsBoard CSS  -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/widgets.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
</head>

<body>
    <div class="scroll-progress primary-bg"></div>
    <!-- Start Preloader -->
    <div class="preloader text-center">
        <div class="circle"></div>
    </div>
    <!--Offcanvas sidebar-->
    <aside id="sidebar-wrapper" class="custom-scrollbar offcanvas-sidebar" th:replace="commons/commons.html::sideBar">

    </aside>

    <!-- Start Header -->
    <header class="main-header header-style-1 font-heading" th:replace="commons/commons.html::headerBar">

    </header>
    <!--Start search form-->
    <div class="main-search-form" th:replace="commons/commons.html::searchBar">

    </div>
    <!-- Start Main content -->
    <main>
        <div class="featured-1">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 align-self-center">
                        <p class="text-muted"><span class="typewrite d-inline" data-period="2000" data-type='[ " Travel Blogger. ", "Content Writter. ", "Food Guides " ]'></span></p>
                        <h2>Hello, I’m <span>Steven</span></h2>
                        <h3 class="mb-20"> Welcome to my blog</h3>
                        <h5 class="text-muted">Don't miss out on the latest news about Travel tips, Hotels review, Food guide...</h5>
                        <form class="input-group form-subcriber mt-30 d-flex">
                            <input type="email" class="form-control bg-white font-small" placeholder="Enter your email">
                            <button class="btn bg-primary text-white" type="submit">Subscribe</button>
                        </form>
                    </div>
                    <div class="col-lg-6 text-right d-none d-lg-block">
                        <img th:href="@{/assets/imgs/authors/featured.png}" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="hot-tags pt-30 pb-30 font-small align-self-center">
                <div class="widget-header-3">
                    <div class="row align-self-center">
                        <div class="col-md-4 align-self-center">
                            <h5 class="widget-title">Featured posts</h5>
                        </div>
                        <div class="col-md-8 text-md-right font-small align-self-center">
                            <p class="d-inline-block mr-5 mb-0"><i class="elegant-icon  icon_tag_alt mr-5 text-muted"></i>Hot tags:</p>
                            <ul class="list-inline d-inline-block tags">
                                <li class="list-inline-item"><a href="#"># Covid-19</a></li>
                                <li class="list-inline-item"><a href="#"># Inspiration</a></li>
                                <li class="list-inline-item"><a href="#"># Work online</a></li>
                                <li class="list-inline-item"><a href="#"># Stay home</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="loop-grid mb-30">
                <div class="row">
<!--                    <div class="col-lg-8 mb-30">-->
<!--                        <div class="carausel-post-1 hover-up border-radius-10 overflow-hidden transition-normal position-relative wow fadeInUp animated">-->
<!--                            <div class="arrow-cover"></div>-->
<!--                            <div class="slide-fade">-->
<!--                                <div class="position-relative post-thumb">-->
<!--                                    <div class="thumb-overlay img-hover-slide position-relative" style="background-image: url(assets/imgs/news/news-4.jpg)">-->
<!--                                        <a class="img-link" href="single.html"></a>-->
<!--                                        <span class="top-left-icon bg-warning"><i class="elegant-icon icon_star_alt"></i></span>-->
<!--                                        <div class="post-content-overlay text-white ml-30 mr-30 pb-30">-->
<!--                                            <div class="entry-meta meta-0 font-small mb-20">-->
<!--                                                <a href="category.html"><span class="post-cat text-info text-uppercase">Travel</span></a>-->
<!--                                                <a href="category.html"><span class="post-cat text-success text-uppercase">Animal</span></a>-->
<!--                                            </div>-->
<!--                                            <h3 class="post-title font-weight-900 mb-20">-->
<!--                                                <a class="text-white" href="single.html">Beachmaster Elephant Seal Fights off Rival Male, The match is uncompromising</a>-->
<!--                                            </h3>-->
<!--                                            <div class="entry-meta meta-1 font-small text-white mt-10 pr-5 pl-5">-->
<!--                                                <span class="post-on">20 minutes ago</span>-->
<!--                                                <span class="hit-count has-dot">23k Views</span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="position-relative post-thumb">-->
<!--                                    <div class="thumb-overlay img-hover-slide position-relative" style="background-image: url(assets/imgs/news/news-6.jpg)">-->
<!--                                        <a class="img-link" href="single.html"></a>-->
<!--                                        <span class="top-left-icon bg-danger"><i class="elegant-icon icon_image"></i></span>-->
<!--                                        <div class="post-content-overlay text-white ml-30 mr-30 pb-30">-->
<!--                                            <div class="entry-meta meta-0 font-small mb-20">-->
<!--                                                <a href="category.html"><span class="post-cat text-info text-uppercase">Lifestyle</span></a>-->
<!--                                            </div>-->
<!--                                            <h3 class="post-title font-weight-900 mb-20">-->
<!--                                                <a class="text-white" href="single.html">This genius photo experiment shows we are all just sheeple in the consumer matrix</a>-->
<!--                                            </h3>-->
<!--                                            <div class="entry-meta meta-1 font-small text-white mt-10 pr-5 pl-5">-->
<!--                                                <span class="post-on">26 August 2020</span>-->
<!--                                                <span class="hit-count has-dot">18k Views</span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                    <article class="col-lg-4 col-md-6 mb-30 wow fadeInUp animated" data-wow-delay="0.2s" th:each="list :${articleList}">
                        <div class="post-card-1 border-radius-10 hover-up">
                            <div class="post-thumb thumb-overlay img-hover-slide position-relative" th:style="'background-image: url(/'+${list.getImage()+')'}">
<!--                                <input type="hidden" id="id" th:value="${list.getId()}">-->
                                <a  class="btn"></a>
                                <span class="top-right-icon bg-success"><i class="elegant-icon icon_camera_alt"></i></span>
                                <ul class="social-share">
                                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>
                                    <li><a class="fb" href="#" title="Share on Facebook" target="_blank"><i class="elegant-icon social_facebook"></i></a></li>
                                    <li><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>
                                    <li><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>
                                </ul>
                            </div>
                            <div class="post-content p-30">
                                <div class="entry-meta meta-0 font-small mb-10">
                                    <a href="category.html"><span class="post-cat text-info">Travel</span></a>
                                    <a href="category.html"><span class="post-cat text-success">Food</span></a>
                                </div>
                                <div class="d-flex post-card-content">
                                    <h5 class="post-title mb-20 font-weight-900">
<!--                                        <a th:href="@{/blog/single(id=${list.getId()})}" th:text="${list.getContent()}"></a>-->
<!--                                        <a href="javascript:void(0)" th:text="${list.getContent()}" id="postSingle"-->
<!--                                                    -->
<!--                                        ></a>-->
                                        <a href="javascript:void(0)" th:text="${list.getContent()}" id="postSingle"
                                           th:onclick="postSingle(${list.getId()})"></a>
                                    </h5>
                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                        <span class="post-on" th:text="${list.getTitle()}"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>


<!--                    <article class="col-lg-4 col-md-6 mb-30 wow fadeInUp animated">-->
<!--                        <div class="post-card-1 border-radius-10 hover-up">-->
<!--                            <div class="post-thumb thumb-overlay img-hover-slide position-relative" style="background-image: url(assets/imgs/news/news-7.jpg)">-->
<!--                                <a class="img-link" href="single.html"></a>-->
<!--                                <ul class="social-share">-->
<!--                                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>-->
<!--                                    <li><a class="fb" href="#" title="Share on Facebook" target="_blank"><i class="elegant-icon social_facebook"></i></a></li>-->
<!--                                    <li><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>-->
<!--                                    <li><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                            <div class="post-content p-30">-->
<!--                                <div class="entry-meta meta-0 font-small mb-10">-->
<!--                                    <a href="category.html"><span class="post-cat text-warning">Fashion</span></a>-->
<!--                                </div>-->
<!--                                <div class="d-flex post-card-content">-->
<!--                                    <h5 class="post-title mb-20 font-weight-900">-->
<!--                                        <a href="single.html">Put Yourself in Your Customers Shoes</a>-->
<!--                                    </h5>-->
<!--                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">-->
<!--                                        <span class="post-on">17 July</span>-->
<!--                                        <span class="time-reading has-dot">8 mins read</span>-->
<!--                                        <span class="post-by has-dot">12k views</span>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </article>-->
<!--                    <article class="col-lg-4 col-md-6 mb-30 wow fadeInUp animated" data-wow-delay="0.2s">-->
<!--                        <div class="post-card-1 border-radius-10 hover-up">-->
<!--                            <div class="post-thumb thumb-overlay img-hover-slide position-relative" style="background-image: url(assets/imgs/news/news-9.jpg)">-->
<!--                                <a class="img-link" href="single.html"></a>-->
<!--                                <ul class="social-share">-->
<!--                                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>-->
<!--                                    <li><a class="fb" href="#" title="Share on Facebook" target="_blank"><i class="elegant-icon social_facebook"></i></a></li>-->
<!--                                    <li><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>-->
<!--                                    <li><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                            <div class="post-content p-30">-->
<!--                                <div class="entry-meta meta-0 font-small mb-10">-->
<!--                                    <a href="category.html"><span class="post-cat text-danger">Travel</span></a>-->
<!--                                </div>-->
<!--                                <div class="d-flex post-card-content">-->
<!--                                    <h5 class="post-title mb-20 font-weight-900">-->
<!--                                        <a href="single.html">Life and Death in the Empire of the Tiger</a>-->
<!--                                    </h5>-->
<!--                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">-->
<!--                                        <span class="post-on">7 August</span>-->
<!--                                        <span class="time-reading has-dot">15 mins read</span>-->
<!--                                        <span class="post-by has-dot">500 views</span>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </article>-->
<!--                    <article class="col-lg-4 col-md-6 mb-30 wow fadeInUp animated" data-wow-delay="0.4s">-->
<!--                        <div class="post-card-1 border-radius-10 hover-up">-->
<!--                            <div class="post-thumb thumb-overlay img-hover-slide position-relative" style="background-image: url(assets/imgs/news/news-11.jpg)">-->
<!--                                <a class="img-link" href="single.html"></a>-->
<!--                                <span class="top-right-icon bg-info"><i class="elegant-icon icon_headphones"></i></span>-->
<!--                                <ul class="social-share">-->
<!--                                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>-->
<!--                                    <li><a class="fb" href="#" title="Share on Facebook" target="_blank"><i class="elegant-icon social_facebook"></i></a></li>-->
<!--                                    <li><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>-->
<!--                                    <li><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                            <div class="post-content p-30">-->
<!--                                <div class="entry-meta meta-0 font-small mb-10">-->
<!--                                    <a href="category.html"><span class="post-cat text-success">Lifestyle</span></a>-->
<!--                                </div>-->
<!--                                <div class="d-flex post-card-content">-->
<!--                                    <h5 class="post-title mb-20 font-weight-900">-->
<!--                                        <a href="single.html">When Two Wheels Are Better Than Four</a>-->
<!--                                    </h5>-->
<!--                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">-->
<!--                                        <span class="post-on">15 Jun</span>-->
<!--                                        <span class="time-reading has-dot">9 mins read</span>-->
<!--                                        <span class="post-by has-dot">1.2k views</span>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </article>-->
                </div>
            </div>
        </div>
        <div class="bg-grey pt-50 pb-50">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="post-module-2">
                            <div class="widget-header-1 position-relative mb-30  wow fadeInUp animated">
                                <h5 class="mt-5 mb-30">Travel tips</h5>
                            </div>
                            <div class="loop-list loop-list-style-1">
                                <div class="row">
                                    <article class="col-md-6 mb-40 wow fadeInUp  animated">
                                        <div class="post-card-1 border-radius-10 hover-up">
                                            <div class="post-thumb thumb-overlay img-hover-slide position-relative" style="background-image: url(/assets/imgs/news/news-6.jpg)">
                                                <a class="img-link" href="single.html"></a>
                                                <ul class="social-share">
                                                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>
                                                    <li><a class="fb" href="#" title="Share on Facebook" target="_blank"><i class="elegant-icon social_facebook"></i></a></li>
                                                    <li><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>
                                                    <li><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>
                                                </ul>
                                            </div>
                                            <div class="post-content p-30">
                                                <div class="entry-meta meta-0 font-small mb-10">
                                                    <a href="category.html"><span class="post-cat text-info">Artists</span></a>
                                                    <a href="category.html"><span class="post-cat text-success">Film</span></a>
                                                </div>
                                                <div class="d-flex post-card-content">
                                                    <h5 class="post-title mb-20 font-weight-900">
                                                        <a href="single.html">Easy Ways to Use Alternatives to Plastic</a>
                                                    </h5>
                                                    <div class="post-excerpt mb-25 font-small text-muted">
                                                        <p>Graduating from a top accelerator or incubator can be as career-defining for a&nbsp;startup founder&nbsp;as an elite university diploma. The intensive programmes, which…</p>
                                                    </div>
                                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                                        <span class="post-on">27 August</span>
                                                        <span class="time-reading has-dot">12 mins read</span>
                                                        <span class="post-by has-dot">23k views</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                    <article class="col-md-6 mb-40 wow fadeInUp  animated">
                                        <div class="post-card-1 border-radius-10 hover-up">
                                            <div class="post-thumb thumb-overlay img-hover-slide position-relative" style="background-image: url(assets/imgs/news/news-8.jpg)">
                                                <a class="img-link" href="single.html"></a>
                                                <ul class="social-share">
                                                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>
                                                    <li><a class="fb" href="#" title="Share on Facebook" target="_blank"><i class="elegant-icon social_facebook"></i></a></li>
                                                    <li><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>
                                                    <li><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>
                                                </ul>
                                            </div>
                                            <div class="post-content p-30">
                                                <div class="entry-meta meta-0 font-small mb-10">
                                                    <a href="category.html"><span class="post-cat">Fashion</span></a>
                                                </div>
                                                <div class="d-flex post-card-content">
                                                    <h5 class="post-title mb-20 font-weight-900">
                                                        <a href="single.html">Tips for Growing Healthy, Longer Hair</a>
                                                    </h5>
                                                    <div class="post-excerpt mb-25 font-small text-muted">
                                                        <p>Proin vitae placerat quam. Ut sodales eleifend urna, in condimentum tortor ultricies eu. Nunc auctor iaculis dolorProin vitae placerat quam. Proin vitae placerat quam.</p>
                                                    </div>
                                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                                        <span class="post-on">12 August</span>
                                                        <span class="time-reading has-dot">6 mins read</span>
                                                        <span class="post-by has-dot">3k views</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                    <article class="col-md-6 mb-40 wow fadeInUp  animated">
                                        <div class="post-card-1 border-radius-10 hover-up">
                                            <div class="post-thumb thumb-overlay img-hover-slide position-relative" style="background-image: url(assets/imgs/news/news-10.jpg)">
                                                <a class="img-link" href="single.html"></a>
                                                <span class="top-right-icon bg-secondary"><i class="elegant-icon icon_heart_alt"></i></span>
                                                <ul class="social-share">
                                                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>
                                                    <li><a class="fb" href="#" title="Share on Facebook" target="_blank"><i class="elegant-icon social_facebook"></i></a></li>
                                                    <li><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>
                                                    <li><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>
                                                </ul>
                                            </div>
                                            <div class="post-content p-30">
                                                <div class="entry-meta meta-0 font-small mb-10">
                                                    <a href="category.html"><span class="post-cat text-success">Lifestyle</span></a>
                                                </div>
                                                <div class="d-flex post-card-content">
                                                    <h5 class="post-title mb-20 font-weight-900">
                                                        <a href="single.html">Project Ideas Around the House</a>
                                                    </h5>
                                                    <div class="post-excerpt mb-25 font-small text-muted">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor condimentum metus non tempor. Maecenas non augue aliquam, facilisis lectus quis, lacinia risus.</p>
                                                    </div>
                                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                                        <span class="post-on">27 August</span>
                                                        <span class="time-reading has-dot">12 mins read</span>
                                                        <span class="post-by has-dot">23k views</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                    <article class="col-md-6 mb-40 wow fadeInUp  animated">
                                        <div class="post-card-1 border-radius-10 hover-up">
                                            <div class="post-thumb thumb-overlay img-hover-slide position-relative" style="background-image: url(/assets/imgs/news/news-12.jpg)">
                                                <a class="img-link" href="single.html"></a>
                                                <ul class="social-share">
                                                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>
                                                    <li><a class="fb" href="#" title="Share on Facebook" target="_blank"><i class="elegant-icon social_facebook"></i></a></li>
                                                    <li><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>
                                                    <li><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>
                                                </ul>
                                            </div>
                                            <div class="post-content p-30">
                                                <div class="entry-meta meta-0 font-small mb-10">
                                                    <a href="category.html"><span class="post-cat text-danger">Hotels</span></a>
                                                </div>
                                                <div class="d-flex post-card-content">
                                                    <h5 class="post-title mb-20 font-weight-900">
                                                        <a href="single.html">How to Give Yourself a Spa Day from Home</a>
                                                    </h5>
                                                    <div class="post-excerpt mb-25 font-small text-muted">
                                                        <p>Graduating from a top accelerator or incubator can be as career-defining for a&nbsp;startup founder&nbsp;as an elite university diploma. The intensive programmes, which…</p>
                                                    </div>
                                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                                        <span class="post-on">18 August</span>
                                                        <span class="time-reading has-dot">14 mins read</span>
                                                        <span class="post-by has-dot">25k views</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                </div>
                            </div>
                        </div>
                        <div class="post-module-3">
                            <div class="widget-header-1 position-relative mb-30">
                                <h5 class="mt-5 mb-30">Latest posts</h5>
                            </div>
                            <div class="loop-list loop-list-style-1">
                                <article class="hover-up-2 transition-normal wow fadeInUp animated">
                                    <div class="row mb-40 list-style-2">
                                        <div class="col-md-4">
                                            <div class="post-thumb position-relative border-radius-5">
                                                <div class="img-hover-slide border-radius-5 position-relative" style="background-image: url(/assets/imgs/news/news-13.jpg)">
                                                    <a class="img-link" href="single.html"></a>
                                                </div>
                                                <ul class="social-share">
                                                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>
                                                    <li><a class="fb" href="#" title="Share on Facebook" target="_blank"><i class="elegant-icon social_facebook"></i></a></li>
                                                    <li><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>
                                                    <li><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-md-8 align-self-center">
                                            <div class="post-content">
                                                <div class="entry-meta meta-0 font-small mb-10">
                                                    <a href="category.html"><span class="post-cat text-primary">Food</span></a>
                                                </div>
                                                <h5 class="post-title font-weight-900 mb-20">
                                                    <a href="single.html">Helpful Tips for Working from Home as a Freelancer</a>
                                                    <span class="post-format-icon"><i class="elegant-icon icon_star_alt"></i></span>
                                                </h5>
                                                <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                                    <span class="post-on">7 August</span>
                                                    <span class="time-reading has-dot">11 mins read</span>
                                                    <span class="post-by has-dot">3k views</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="hover-up-2 transition-normal wow fadeInUp animated">
                                    <div class="row mb-40 list-style-2">
                                        <div class="col-md-4">
                                            <div class="post-thumb position-relative border-radius-5">
                                                <div class="img-hover-slide border-radius-5 position-relative" style="background-image: url(/assets/imgs/news/news-4.jpg)">
                                                    <a class="img-link" href="single.html"></a>
                                                </div>
                                                <ul class="social-share">
                                                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>
                                                    <li><a class="fb" href="#" title="Share on Facebook" target="_blank"><i class="elegant-icon social_facebook"></i></a></li>
                                                    <li><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>
                                                    <li><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-md-8 align-self-center">
                                            <div class="post-content">
                                                <div class="entry-meta meta-0 font-small mb-10">
                                                    <a href="category.html"><span class="post-cat text-success">Cooking</span></a>
                                                </div>
                                                <h5 class="post-title font-weight-900 mb-20">
                                                    <a href="single.html">10 Easy Ways to Be Environmentally Conscious At Home</a>
                                                </h5>
                                                <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                                    <span class="post-on">27 Sep</span>
                                                    <span class="time-reading has-dot">10 mins read</span>
                                                    <span class="post-by has-dot">22k views</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="hover-up-2 transition-normal wow fadeInUp animated">
                                    <div class="row mb-40 list-style-2">
                                        <div class="col-md-4">
                                            <div class="post-thumb position-relative border-radius-5">
                                                <div class="img-hover-slide border-radius-5 position-relative" style="background-image: url(/assets/imgs/news/news-2.jpg)">
                                                    <a class="img-link" href="single.html"></a>
                                                </div>
                                                <ul class="social-share">
                                                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>
                                                    <li><a class="fb" href="#" title="Share on Facebook" target="_blank"><i class="elegant-icon social_facebook"></i></a></li>
                                                    <li><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>
                                                    <li><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-md-8 align-self-center">
                                            <div class="post-content">
                                                <div class="entry-meta meta-0 font-small mb-10">
                                                    <a href="category.html"><span class="post-cat text-warning">Cooking</span></a>
                                                </div>
                                                <h5 class="post-title font-weight-900 mb-20">
                                                    <a href="single.html">My Favorite Comfies to Lounge in At Home</a>
                                                </h5>
                                                <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                                    <span class="post-on">7 August</span>
                                                    <span class="time-reading has-dot">9 mins read</span>
                                                    <span class="post-by has-dot">12k views</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="hover-up-2 transition-normal wow fadeInUp animated">
                                    <div class="row mb-40 list-style-2">
                                        <div class="col-md-4">
                                            <div class="post-thumb position-relative border-radius-5">
                                                <div class="img-hover-slide border-radius-5 position-relative" style="background-image: url(/assets/imgs/news/news-3.jpg)">
                                                    <a class="img-link" href="single.html"></a>
                                                </div>
                                                <ul class="social-share">
                                                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>
                                                    <li><a class="fb" href="#" title="Share on Facebook" target="_blank"><i class="elegant-icon social_facebook"></i></a></li>
                                                    <li><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>
                                                    <li><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-md-8 align-self-center">
                                            <div class="post-content">
                                                <div class="entry-meta meta-0 font-small mb-10">
                                                    <a href="category.html"><span class="post-cat text-danger">Travel</span></a>
                                                </div>
                                                <h5 class="post-title font-weight-900 mb-20">
                                                    <a href="single.html">How to Give Your Space a Parisian-Inspired Makeover</a>
                                                </h5>
                                                <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                                    <span class="post-on">27 August</span>
                                                    <span class="time-reading has-dot">12 mins read</span>
                                                    <span class="post-by has-dot">23k views</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </div>
                        </div>
                        <div class="pagination-area mb-30 wow fadeInUp animated">
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-start">
                                    <li class="page-item"><a class="page-link" href="#"><i class="elegant-icon arrow_left"></i></a></li>
                                    <li class="page-item active"><a class="page-link" href="#">01</a></li>
                                    <li class="page-item"><a class="page-link" href="#">02</a></li>
                                    <li class="page-item"><a class="page-link" href="#">03</a></li>
                                    <li class="page-item"><a class="page-link" href="#">04</a></li>
                                    <li class="page-item"><a class="page-link" href="#"><i class="elegant-icon arrow_right"></i></a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="widget-area">
                            <div class="sidebar-widget widget-about mb-50 pt-30 pr-30 pb-30 pl-30 bg-white border-radius-5 has-border  wow fadeInUp animated">
                                <img class="about-author-img mb-25" src="assets/imgs/authors/author.jpg" alt="">
                                <h5 class="mb-20">Hello, I'm Steven</h5>
                                <p class="font-medium text-muted">Hi, I’m Stenven, a Florida native, who left my career in corporate wealth management six years ago to embark on a summer of soul searching that would change the course of my life forever.</p>
                                <strong>Follow me: </strong>
                                <ul class="header-social-network d-inline-block list-inline color-white mb-20">
                                    <li class="list-inline-item"><a class="fb" href="#" target="_blank" title="Facebook"><i class="elegant-icon social_facebook"></i></a></li>
                                    <li class="list-inline-item"><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>
                                    <li class="list-inline-item"><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>
                                </ul>
                            </div>
                            <div class="sidebar-widget widget-latest-posts mb-50 wow fadeInUp animated">
                                <div class="widget-header-1 position-relative mb-30">
                                    <h5 class="mt-5 mb-30">Most popular</h5>
                                </div>
                                <div class="post-block-list post-module-1">
                                    <ul class="list-post">
                                        <li class="mb-30 wow fadeInUp animated">
                                            <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
                                                <div class="post-content media-body">
                                                    <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">Spending Some Quality Time with Kids? It’s Possible</a></h6>
                                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                                        <span class="post-on">05 August</span>
                                                        <span class="post-by has-dot">150 views</span>
                                                    </div>
                                                </div>
                                                <div class="post-thumb post-thumb-80 d-flex ml-15 border-radius-5 img-hover-scale overflow-hidden">
                                                    <a class="color-white" href="single.html">
                                                        <img th:src="@{/assets/imgs/news/thumb-6.jpg}" alt="">
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="mb-30 wow fadeInUp animated">
                                            <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
                                                <div class="post-content media-body">
                                                    <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">Relationship Podcasts are Having “That” Talk</a></h6>
                                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                                        <span class="post-on">12 August</span>
                                                        <span class="post-by has-dot">6k views</span>
                                                    </div>
                                                </div>
                                                <div class="post-thumb post-thumb-80 d-flex ml-15 border-radius-5 img-hover-scale overflow-hidden">
                                                    <a class="color-white" href="single.html">
                                                        <img th:src="@{/assets/imgs/news/thumb-7.jpg}" alt="">
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="mb-30 wow fadeInUp animated">
                                            <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
                                                <div class="post-content media-body">
                                                    <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">Here’s How to Get the Best Sleep at Night</a></h6>
                                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                                        <span class="post-on">15 August</span>
                                                        <span class="post-by has-dot">16k views</span>
                                                    </div>
                                                </div>
                                                <div class="post-thumb post-thumb-80 d-flex ml-15 border-radius-5 img-hover-scale overflow-hidden">
                                                    <a class="color-white" href="single.html">
                                                        <img th:src="@{/assets/imgs/news/thumb-2.jpg}" alt="">
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class=" wow fadeInUp animated">
                                            <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
                                                <div class="post-content media-body">
                                                    <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">America’s Governors Get Tested for a Virus That Is Testing Them</a></h6>
                                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                                        <span class="post-on">12 August</span>
                                                        <span class="post-by has-dot">3k views</span>
                                                    </div>
                                                </div>
                                                <div class="post-thumb post-thumb-80 d-flex ml-15 border-radius-5 img-hover-scale overflow-hidden">
                                                    <a class="color-white" href="single.html">
                                                        <img th:src="@{/assets/imgs/news/thumb-3.jpg}" alt="">
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="sidebar-widget widget-latest-posts mb-50 wow fadeInUp animated">
                                <div class="widget-header-1 position-relative mb-30">
                                    <h5 class="mt-5 mb-30">Last comments</h5>
                                </div>
                                <div class="post-block-list post-module-2">
                                    <ul class="list-post">
                                        <li class="mb-30 wow fadeInUp animated">
                                            <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
                                                <div class="post-thumb post-thumb-64 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">
                                                    <a class="color-white" href="single.html">
                                                        <img th:src="@{/assets/imgs/authors/author-2.jpg}" alt="">
                                                    </a>
                                                </div>
                                                <div class="post-content media-body">
                                                    <p class="mb-10"><a href="author.html"><strong>David</strong></a>
                                                        <span class="ml-15 font-small text-muted has-dot">16 Jan 2020</span>
                                                    </p>
                                                    <p class="text-muted font-small">A writer is someone for whom writing is more difficult than...</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="mb-30 wow fadeInUp animated">
                                            <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
                                                <div class="post-thumb post-thumb-64 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">
                                                    <a class="color-white" href="single.html">
                                                        <img th:src="@{/assets/imgs/authors/author-3.jpg}" alt="">
                                                    </a>
                                                </div>
                                                <div class="post-content media-body">
                                                    <p class="mb-10"><a href="author.html"><strong>Kokawa</strong></a>
                                                        <span class="ml-15 font-small text-muted has-dot">12 Feb 2020</span>
                                                    </p>
                                                    <p class="text-muted font-small">Striking pewter studded epaulettes silver zips</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="wow fadeInUp animated">
                                            <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
                                                <div class="post-thumb post-thumb-64 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">
                                                    <a class="color-white" href="single.html">
                                                        <img th:src="@{/assets/imgs/news/thumb-1.jpg}" alt="">
                                                    </a>
                                                </div>
                                                <div class="post-content media-body">
                                                    <p class="mb-10"><a href="author.html"><strong>Tsukasi</strong></a>
                                                        <span class="ml-15 font-small text-muted has-dot">18 May 2020</span>
                                                    </p>
                                                    <p class="text-muted font-small">Workwear bow detailing a slingback buckle strap</p>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="sidebar-widget widget_instagram wow fadeInUp animated">
                                <div class="widget-header-1 position-relative mb-30">
                                    <h5 class="mt-5 mb-30">Instagram</h5>
                                </div>
                                <div class="instagram-gellay">
                                    <ul class="insta-feed">
                                        <li>
                                            <a th:href="@{/assets/imgs/thumbnail-3.jpg}" class="play-video" data-animate="zoomIn" data-duration="1.5s" data-delay="0.1s"><img class="border-radius-5" src="assets/imgs/news/thumb-1.jpg" alt=""></a>
                                        </li>
                                        <li>
                                            <a th:href="@{/assets/imgs/thumbnail-4.jpg}" class="play-video" data-animate="zoomIn" data-duration="1.5s" data-delay="0.1s"><img class="border-radius-5" src="assets/imgs/news/thumb-2.jpg" alt=""></a>
                                        </li>
                                        <li>
                                            <a th:href="@{/assets/imgs/thumbnail-5.jpg}" class="play-video" data-animate="zoomIn" data-duration="1.5s" data-delay="0.1s"><img class="border-radius-5" src="assets/imgs/news/thumb-3.jpg" alt=""></a>
                                        </li>
                                        <li>
                                            <a th:href="@{/assets/imgs/thumbnail-3.jpg}" class="play-video" data-animate="zoomIn" data-duration="1.5s" data-delay="0.1s"><img class="border-radius-5" src="assets/imgs/news/thumb-4.jpg" alt=""></a>
                                        </li>
                                        <li>
                                            <a th:href="@{/assets/imgs/thumbnail-4.jpg}" class="play-video" data-animate="zoomIn" data-duration="1.5s" data-delay="0.1s"><img class="border-radius-5" src="assets/imgs/news/thumb-5.jpg" alt=""></a>
                                        </li>
                                        <li>
                                            <a th:href="@{/assets/imgs/thumbnail-5.jpg}" class="play-video" data-animate="zoomIn" data-duration="1.5s" data-delay="0.1s"><img class="border-radius-5" src="assets/imgs/news/thumb-6.jpg" alt=""></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- End Main content -->
    <!--site-bottom-->
<!--    <div class="site-bottom pt-50 pb-50">-->
<!--        <div class="container">-->
<!--            <div class="row">-->
<!--                <div class="col-lg-4 col-md-6">-->
<!--                    <div class="sidebar-widget widget-latest-posts mb-30 wow fadeInUp animated">-->
<!--                        <div class="widget-header-2 position-relative mb-30">-->
<!--                            <h5 class="mt-5 mb-30">Destinations</h5>-->
<!--                        </div>-->
<!--                        <div class="post-block-list post-module-1">-->
<!--                            <ul class="list-post">-->
<!--                                <li class="mb-30">-->
<!--                                    <div class="d-flex hover-up-2 transition-normal">-->
<!--                                        <div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                                            <a class="color-white" href="single.html">-->
<!--                                                <img src="assets/imgs/news/thumb-1.jpg" alt="">-->
<!--                                            </a>-->
<!--                                        </div>-->
<!--                                        <div class="post-content media-body">-->
<!--                                            <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">The Best Time to Travel to Cambodia</a></h6>-->
<!--                                            <div class="entry-meta meta-1 float-left font-x-small text-uppercase">-->
<!--                                                <span class="post-on">27 Jan</span>-->
<!--                                                <span class="post-by has-dot">13k views</span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="mb-30">-->
<!--                                    <div class="d-flex hover-up-2 transition-normal">-->
<!--                                        <div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                                            <a class="color-white" href="single.html">-->
<!--                                                <img src="assets/imgs/news/thumb-2.jpg" alt="">-->
<!--                                            </a>-->
<!--                                        </div>-->
<!--                                        <div class="post-content media-body">-->
<!--                                            <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">20 Photos to Inspire You to Visit Cambodia</a></h6>-->
<!--                                            <div class="entry-meta meta-1 float-left font-x-small text-uppercase">-->
<!--                                                <span class="post-on">27 August</span>-->
<!--                                                <span class="post-by has-dot">14k views</span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="mb-30">-->
<!--                                    <div class="d-flex hover-up-2 transition-normal">-->
<!--                                        <div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                                            <a class="color-white" href="single.html">-->
<!--                                                <img src="assets/imgs/news/thumb-3.jpg" alt="">-->
<!--                                            </a>-->
<!--                                        </div>-->
<!--                                        <div class="post-content media-body">-->
<!--                                            <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">Epic Arts Cambodia: Charity for the Disabled</a></h6>-->
<!--                                            <div class="entry-meta meta-1 float-left font-x-small text-uppercase">-->
<!--                                                <span class="post-on">29 August</span>-->
<!--                                                <span class="post-by has-dot">23k views</span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-lg-4 col-md-6">-->
<!--                    <div class="sidebar-widget widget-latest-posts mb-30 wow fadeInUp animated" data-wow-delay="0.2s">-->
<!--                        <div class="widget-header-2 position-relative mb-30">-->
<!--                            <h5 class="mt-5 mb-30">Lifestyle</h5>-->
<!--                        </div>-->
<!--                        <div class="post-block-list post-module-1">-->
<!--                            <ul class="list-post">-->
<!--                                <li class="mb-30">-->
<!--                                    <div class="d-flex hover-up-2 transition-normal">-->
<!--                                        <div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                                            <a class="color-white" href="single.html">-->
<!--                                                <img src="assets/imgs/news/thumb-4.jpg" alt="">-->
<!--                                            </a>-->
<!--                                        </div>-->
<!--                                        <div class="post-content media-body">-->
<!--                                            <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">10 Ways to De-Stress Your Day Hour by Hour</a></h6>-->
<!--                                            <div class="entry-meta meta-1 float-left font-x-small text-uppercase">-->
<!--                                                <span class="post-on">12 August</span>-->
<!--                                                <span class="post-by has-dot">3k views</span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="mb-30">-->
<!--                                    <div class="d-flex hover-up-2 transition-normal">-->
<!--                                        <div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                                            <a class="color-white" href="single.html">-->
<!--                                                <img src="assets/imgs/news/thumb-5.jpg" alt="">-->
<!--                                            </a>-->
<!--                                        </div>-->
<!--                                        <div class="post-content media-body">-->
<!--                                            <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">134 Free Weekly Meal Planner Printable</a></h6>-->
<!--                                            <div class="entry-meta meta-1 float-left font-x-small text-uppercase">-->
<!--                                                <span class="post-on">15 August</span>-->
<!--                                                <span class="post-by has-dot">4.1k views</span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="mb-30">-->
<!--                                    <div class="d-flex hover-up-2 transition-normal">-->
<!--                                        <div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                                            <a class="color-white" href="single.html">-->
<!--                                                <img src="assets/imgs/news/thumb-6.jpg" alt="">-->
<!--                                            </a>-->
<!--                                        </div>-->
<!--                                        <div class="post-content media-body">-->
<!--                                            <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">Free Printable Stickers for Your Bullet Journal</a></h6>-->
<!--                                            <div class="entry-meta meta-1 float-left font-x-small text-uppercase">-->
<!--                                                <span class="post-on">16 August</span>-->
<!--                                                <span class="post-by has-dot">2.2k views</span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-lg-4">-->
<!--                    <div class="sidebar-widget widget-latest-posts mb-30 wow fadeInUp animated" data-wow-delay="0.4s">-->
<!--                        <div class="widget-header-2 position-relative mb-30">-->
<!--                            <h5 class="mt-5 mb-30">Photography</h5>-->
<!--                        </div>-->
<!--                        <div class="post-block-list post-module-1">-->
<!--                            <ul class="list-post">-->
<!--                                <li class="mb-30">-->
<!--                                    <div class="d-flex hover-up-2 transition-normal">-->
<!--                                        <div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                                            <a class="color-white" href="single.html">-->
<!--                                                <img src="assets/imgs/news/thumb-7.jpg" alt="">-->
<!--                                            </a>-->
<!--                                        </div>-->
<!--                                        <div class="post-content media-body">-->
<!--                                            <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">Which TBA Preset Pack is Right For You?</a></h6>-->
<!--                                            <div class="entry-meta meta-1 float-left font-x-small text-uppercase">-->
<!--                                                <span class="post-on">06 May</span>-->
<!--                                                <span class="post-by has-dot">23k views</span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="mb-30">-->
<!--                                    <div class="d-flex hover-up-2 transition-normal">-->
<!--                                        <div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                                            <a class="color-white" href="single.html">-->
<!--                                                <img src="assets/imgs/news/thumb-8.jpg" alt="">-->
<!--                                            </a>-->
<!--                                        </div>-->
<!--                                        <div class="post-content media-body">-->
<!--                                            <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">How to Get Amazing Photos at the Pyramids of Giza</a></h6>-->
<!--                                            <div class="entry-meta meta-1 float-left font-x-small text-uppercase">-->
<!--                                                <span class="post-on">05 Jun</span>-->
<!--                                                <span class="post-by has-dot">5k views</span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="mb-30">-->
<!--                                    <div class="d-flex hover-up-2 transition-normal">-->
<!--                                        <div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                                            <a class="color-white" href="single.html">-->
<!--                                                <img src="assets/imgs/news/thumb-9.jpg" alt="">-->
<!--                                            </a>-->
<!--                                        </div>-->
<!--                                        <div class="post-content media-body">-->
<!--                                            <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">Beginner’s Guide to Travel Drone Photography</a></h6>-->
<!--                                            <div class="entry-meta meta-1 float-left font-x-small text-uppercase">-->
<!--                                                <span class="post-on">08 August</span>-->
<!--                                                <span class="post-by has-dot">2k views</span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="sidebar-widget widget-latest-posts mb-30 mt-20 wow fadeInUp animated">-->
<!--                <div class="widget-header-2 position-relative mb-30">-->
<!--                    <h5 class="mt-5 mb-30">Categories</h5>-->
<!--                </div>-->
<!--                <div class="carausel-3-columns">-->
<!--                    <div class="carausel-3-columns-item d-flex bg-grey has-border p-25 hover-up-2 transition-normal border-radius-5">-->
<!--                        <div class="post-thumb post-thumb-64 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                            <a class="color-white" href="single.html">-->
<!--                                <img src="assets/imgs/news/thumb-1.jpg" alt="">-->
<!--                            </a>-->
<!--                        </div>-->
<!--                        <div class="post-content media-body">-->
<!--                            <h6> <a href="category.html">Travel Tips</a> </h6>-->
<!--                            <p class="text-muted font-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="carausel-3-columns-item d-flex bg-grey has-border p-25 hover-up-2 transition-normal border-radius-5">-->
<!--                        <div class="post-thumb post-thumb-64 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                            <a class="color-white" href="single.html">-->
<!--                                <img src="assets/imgs/news/thumb-2.jpg" alt="">-->
<!--                            </a>-->
<!--                        </div>-->
<!--                        <div class="post-content media-body">-->
<!--                            <h6><a href="category.html">Lifestyle</a></h6>-->
<!--                            <p class="text-muted font-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="carausel-3-columns-item d-flex bg-grey has-border p-25 hover-up-2 transition-normal border-radius-5">-->
<!--                        <div class="post-thumb post-thumb-64 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                            <a class="color-white" href="single.html">-->
<!--                                <img src="assets/imgs/news/thumb-3.jpg" alt="">-->
<!--                            </a>-->
<!--                        </div>-->
<!--                        <div class="post-content media-body">-->
<!--                            <h6><a href="category.html">Foody</a></h6>-->
<!--                            <p class="text-muted font-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="carausel-3-columns-item d-flex bg-grey has-border p-25 hover-up-2 transition-normal border-radius-5">-->
<!--                        <div class="post-thumb post-thumb-64 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">-->
<!--                            <a class="color-white" href="single.html">-->
<!--                                <img src="assets/imgs/news/thumb-4.jpg" alt="">-->
<!--                            </a>-->
<!--                        </div>-->
<!--                        <div class="post-content media-body">-->
<!--                            <h6><a href="category.html">Entertaiment</a></h6>-->
<!--                            <p class="text-muted font-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        &lt;!&ndash;container&ndash;&gt;-->
<!--    </div>-->
    <!--end site-bottom-->
    <!-- Footer Start-->
    <footer class="pt-50 pb-20 bg-grey" th:replace="commons/commons.html::footerBar">


    </footer>
    <script th:src="@{/assets/js/vendor/jquery-1.12.4.min.js}"></script>
    <script type="text/javascript">

            // $('#postSingle').click(function (){
            //     console.log($('#postSingle').html())
            //     $.ajax({
            //         type:"post",
            //         url:"../article/blog/single",
            //         data:{id},
            //         success:function (result){
            //             console.log(result);
            //
            //             if(result.code===200){
            //
            //                 location.href="/blog/toSingle"
            //
            //             }else {
            //                 alert("错误")
            //             }
            //         }
            //     })
            // })
            function postSingle(id){
                console.log(id)
            }
    </script>
    <!-- End Footer -->
    <div class="dark-mark"></div>
    <!-- Vendor JS-->
    <script th:src="@{/assets/js/vendor/modernizr-3.5.0.min.js}"></script>




    </script>
    <script th:src="@{/assets/js/vendor/popper.min.js}"></script>
    <script th:src="@{/assets/js/vendor/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/vendor/jquery.slicknav.js}"></script>
    <script th:src="@{/assets/js/vendor/slick.min.js}"></script>
    <script th:src="@{/assets/js/vendor/wow.min.js}"></script>
    <script th:src="@{/assets/js/vendor/jquery.ticker.js}"></script>
    <script th:src="@{/assets/js/vendor/jquery.vticker-min.js}"></script>
    <script th:src="@{/assets/js/vendor/jquery.scrollUp.min.js}"></script>
    <script th:src="@{/assets/js/vendor/jquery.nice-select.min.js}"></script>
    <script th:src="@{/assets/js/vendor/jquery.magnific-popup.js}"></script>
    <script th:src="@{/assets/js/vendor/jquery.sticky.js}"></script>
    <script th:src="@{/assets/js/vendor/perfect-scrollbar.js}"></script>
    <script th:src="@{/assets/js/vendor/waypoints.min.js}"></script>
    <script th:src="@{/assets/js/vendor/jquery.theia.sticky.js}"></script>
    <!-- NewsBoard JS -->
    <script th:src="@{/assets/js/main.js}"></script>
</body>

</html>